<template>
    <div class="template-index-Lu">
        <commpVxeTable
            :key="reCommpVxeTable"
            :conditionBtnRow="true"
            :config="dataTableConfig"
            :columns="columnsVxe"
            :formItem="formItem"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            >
            <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-upload :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="uploadClick">
                        <a-button class="blue-btn" @click="" icon="import">上传</a-button>
                    </a-upload>
                </template>
            </vxe-form-item>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
                <a-form-item>
                    <a-button class="green-btn" style="margin-right: 5px;" @click="openFiles(row)" icon="eye">预览</a-button>
                    <a-button class="blue-btn" style="margin-right: 5px;" @click="downloadFiles(row)" icon="vertical-align-bottom">下载</a-button>
                    <a-button class="red-btn" @click="deleteTaoCan(row.id)" icon="delete">删除</a-button>
                </a-form-item>
            </a-form>
            </template>
        </commpVxeTable>
        <a-modal
            title="申请附件预览"
            :visible="filesVisible"
            @ok="filesVisible = false"
            @cancel="filesVisible = false"
            :footer="null"
            width="60%"
        >
            <iframe
                v-if="iframeSrc"
                :key="iframeKey"
                :src="iframeSrc"
                ref="iframeServerEditingRef"
                scrolling="auto"
                width="100%"
                :height="(windowInnerHeight -300 )+'px'"
                style="border: 0;"
            ></iframe>
            <span v-else>当前文件发生错误，请刷新！</span>
        </a-modal>
    </div>
</template>
<script>
import {
    deleleMinioFile,
    downLoadOa,
    sqfjmbupload,
    openFile
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import blobType from '@/common/blobType'
export default {
    components: {
        commpVxeTable,
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.list,
                rowId: 'id',
                urlType: true,
                paramet: {
                    flx: '申请附件模板'
                }
            },
            columnsVxe: [
                {
                    type: 'checkbox',
                    width: 60,
                    fixed: 'left'
                },{
                    title: '文件名称',
                    field: 'fmc',
                },{
                    title: '上传人',
                    field: 'fscr',
                },{
                    title: '上传时间',
                    field: 'fscsj',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 250,
                    slots: {
                    // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                }
            ],
            formItem: [
                {
                    label: '文件名称',
                    model: 'fmc',
                }
            ],
            idList: [],
            filesVisible: false,
            iframeSrc: '',
            windowInnerHeight:window.innerHeight,
            iframeKey: ''
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        beforeUpload(e){
            return false
        },
        uploadClick({file}){
            //console.log(file)
            var that = this
            if(typeof file.uid !== 'undefined') {
                const fileData = new FormData();
                fileData.append("file",file);
                //console.log(fileData)
                sqfjmbupload(fileData).then(res => {
                    //console.log('fileData',res)
                    if (res.success) {
                        that.$message.success(res.message)
                        that.reCommpVxeTable = Date.now()
                    } else {
                        that.$message.warning(res.message)
                    }
                })
            }
        },
        //
        openFiles(item){
            if(item.fwjlx.indexOf('pdf') !== -1){
                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI2+YchConstant.SPZX_OA+'/oaFjzyk/downLoadOa?id='+item.id
                this.iframeKey = Date.now()
                this.filesVisible = true
                //console.log(this.iframeSrc)
            } else {
                openFile({id:item.id}).then(res => {
                    if(!res.success){
                        this.$message.warning('当前附件类型不支持预览,请下载查看')
                    } else {
                        this.iframeSrc = res.result.wordUrl
                        this.iframeKey = Date.now()
                        this.filesVisible = true
                        //console.log(this.iframeSrc)
                    }
                })
            }
        },
        // 删除
        deleteTaoCan(ids){
            var that = this
            that.$confirm({
                title: '您确定要删除当前附件吗?',
                onOk() {
                    deleleMinioFile({id:ids}).then(res => {
                        if(res.code == 200){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.error(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        // 下载附件
        downloadFiles(val){
            //console.log('下载',val)
            var that = this
            var fileName = val.fmc
            downLoadOa({id:val.id}).then((data) => {
                // //console.log(data)
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
                // this.vxModal.visabled = false;
            })
        },
    }
}
</script>
